import React, { Component } from "react";
import Search from "@/components/Search";
import Banner from "./components/Banner";
import Menus from "./components/Menus";
import Notify from "./components/Notify";
import RecommendList from "./components/RecommendList";
import SecondsKill from "./components/SecondsKill";
import Footer from "@/components/Footer";
import style from "./index.module.scss";
import { SpinLoading } from "antd-mobile";
import store from "@/store";

 class Home extends Component {
  state = {
    isLoading1:store.getState().isLoading1
  };

  componentDidMount() {
    store.subscribe(()=>{
      this.setState({
        isLoading1:store.getState().isLoading1
      })
    })
  }

  render() {
    return (
      <div className={style.homebox}>
        <div className={style.main}>
          <Search showcancel={true}></Search>
          <Banner></Banner>
          <Notify></Notify>
          <Menus></Menus>
          <SecondsKill></SecondsKill>
          <RecommendList></RecommendList>
        </div>
        <div className={style.footer}>
          <Footer></Footer>
        </div>
        <div
          className={style.loading}
          style={{ display: this.state.isLoading1 ? "block" : "none" }}
        >
          <SpinLoading color="primary" />
        </div>
      </div>
    );
  }
}

export default Home;